<template>
    <div class="rights">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">{{
                $t('rights.home')
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
                $t('rights.RightsManage')
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
                $t('rights.RightsList')
            }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 权限列表展示 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-table
                        :data="rightsList"
                        border
                        style="width: 100%"
                        stripe
                    >
                        <el-table-column
                            type="index"
                            :label="$t('rights.id')"
                            width="60px"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="authName"
                            :label="$t('rights.RightsName')"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="level"
                            sortable
                            :label="$t('rights.RightsLevel')"
                        >
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.level === '0'"
                                    >一级权限</el-tag
                                >
                                <el-tag
                                    v-else-if="scope.row.level === '1'"
                                    type="success"
                                    >二级权限</el-tag
                                >
                                <el-tag v-else type="warning">三级权限</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'rightsWrap',
    data() {
        return {
            // 权限列表数据
            rightsList: [],
        }
    },
    methods: {
        // 获取权限列表
        async getRightsList() {
            // 请求权限列表接口
            const { data: res } = await this.$http.get('/rights/list')
            // 获取 msg 和 status
            const {
                meta: { msg, status },
            } = res
            // 如果请求失败
            if (status !== 200) {
                // 提示消息
                return this.$message.error(msg)
            }
            // 遍历返回的数据列表，对权限级别进行分组
            // 将返回的数据赋值给权限列表数据属性
            this.rightsList = res.data
            console.log(this.rightsList)
        },
    },
    created() {
        // 获取权限列表
        this.getRightsList()
    },
}
</script>

<style scoped>
</style>
